<template>
  <div class="main-box">
    <!-- 走马灯 -->
    <div class="block">
      <el-carousel
        indicator-position="none"
        trigger="click"
        arrow="never"
        height="25px"
      >
        <el-carousel-item
          v-for="item in notice"
          :key="item"
        >
          <h3 class="small sec-notice">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <el-row>
      <el-col :span="11">
        <el-card class="box-card">
          <div
            slot="header"
            class="clearfix"
          >
            <span>近期政策</span>
          </div>
          <div
            v-for="(prolicy, index) in policies"
            :key="index"
            class="text item"
          >
           <el-link type="primary">{{ prolicy }}</el-link>
          </div>
        </el-card>
      </el-col>
      <el-col :span="11" :offset="2">
        <el-card class="box-card">
          <div
            slot="header"
            class="clearfix"
          >
            <span>热门视频</span>
          </div>
          <div
            v-for="(video, index) in videos"
            :key="index"
            class="text item"
          >
            <el-link @click="showVideoInfo(video)" type="primary">{{ video.videoName }}</el-link>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--  -->
    <el-divider></el-divider>
    <el-row>
      <el-col :span="8">
        <!-- <div class="base_box staff_manager"></div> -->
        <!-- <el-button type="primary" class="base_box staff_manager">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button> -->
      </el-col>
      <el-col :span="8"><div class=""></div></el-col>
      <el-col :span="8"><div class=""></div></el-col>
    </el-row>
    <el-empty description="描述文字"></el-empty>
  </div>
</template>

<script>
import { queryHotVideos } from '../api/system/system';
export default {
  data() {
    return {
      notice: [
        "张三获得保安队长职位，恭喜~",
        "最近宜宾等地区疫情严重，来往人员注意报备~",
        "公司福利：凡获得见义勇为称号都可以来财务办公室领取3万元现金~",
      ],
      policies: [
        "基层员工工资调整",
        "xxx小区工作内容调整",
        "领导“老虎”作风公告",
        "国庆假期安排"
      ],
      videos: []
    }
  },
  async mounted() {
    const {data: res} = await queryHotVideos(5)
    if (res.code === 200) {
      this.videos = res.data.videos
    }
  },
  methods: {
    showVideoInfo(video) {
      this.$store.dispatch('current_video', JSON.stringify(video))
      this.$router.push("/videoDetail")
    }
  }
};
</script>

<style lang="css" scoped>
.sec-notice {
  width: 100%;
  text-align: center;
  color: orange;
  vertical-align: center;
}
.el-divider {
  margin: 10px 0 25px 0;
}
.el-card {
    height: 300px;
}
.base_box {
  width: 240px;
  height: 80px;
}
</style>